<template>
  <div>
    <!--
    表达类组件封装：
      父传子：数据应该是父组件通过props传递过来的
      子传父：监听输入，子组件将值传递给父组件进行修改

    下拉框组件的封装：
      通过父组件将selectList和selectId传递给子组件
      子组件接收到selectList和selectId后，动态渲染selectList然后将selectId与select的value属性绑定
      子组件监听select的change事件，当用户选择select的时候将当前选中向的value通过父传子传递给父组件
      <base-select :selectList="selectList" :selectId="selectId" @getSelectId="getSelectId"></base-select>
    v-model简化代码
        父组件v-mode简化代码，实现父组件和子组件双向数据绑定
        子组件：props通过value接收，事件触发input
        父组件：v-model给组件直接绑定数据
    -->
    <base-select :selectList="selectList" v-model="selectId"></base-select>
  </div>
</template>
<script>
import baseSelect from "@/components/base-dialog.vue";
export default {
  name: "App",
  data() {
    return {
      selectList: [
        {id: 1, value: "shanghai", address: "上海"},
        {id: 2, value: "beijing", address: "北京"},
        {id: 3, value: "guangzhou", address: "广州"},
        {id: 4, value: "shenzhen", address: "深圳"},
      ],
      selectId: "beijing"
    }
  },
  methods: {
    getSelectId(selectId) {
      this.selectId = selectId
      console.log("父组件收到的selectId", selectId)
    }
  },
  components: {baseSelect}
}
</script>
<style lang="less"></style>
